组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。今天我们就来学习一下。
vue中的重要特性
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue1title>
<script type="text/Javascript" src="../vue.js">script>
head>
<body>
<div id="app">
<my-component my-name="huhx">my-component>
div>
<script type="text/Javascript" src="js/vue3.js">script>
body>
html>
// 定义
var MyCompOnent= Vue.extend({
template: ‘A custom component!{{myName}}
‘,
props: [‘myName‘]
})
// 注册
Vue.component(‘my-component‘, MyComponent);
// 创建根实例
var ap = new Vue({
el: ‘#app‘,
})
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue4title>
<script type="text/Javascript" src="../vue.js">script>
head>
<body>
<div id="app">
<div v-my-directive="someValue">{{msg}}div>
div>
<script type="text/Javascript" src="js/vue4.js">script>
body>
html>
Vue.directive(‘my-directive‘, {
bind: function() {
// 准备工作
console.log("bind function.");
},
update: function(newValue, oldValue) {
// 值更新时的工作
console.log("new: " + newValue + ", old: " + oldValue);
},
unbind: function() {
// 清理工作
console.log("unbind function.");
}
});
var demo = new Vue({
el: ‘#app‘,
data: {
msg: ‘hello!‘
}
})
bind function.
new: undefined, old: undefined
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue5title>
<script type="text/Javascript" src="../vue.js">script>
head>
<body>
<div id="app">
<span v-text="message | reverse">span>
div>
<script type="text/Javascript" src="js/vue5.js">script>
body>
html>
Vue.filter(‘reverse‘, function (value) {
return value.split(‘‘).reverse().join(‘‘)
});
var demo = new Vue({
el: ‘#app‘,
data: {
message: ‘hello!‘
}
});
京公网安备 11010802041100号